<script>
import mapData2 from "../assets/404_images/data.json";
// import mapData from "../components/Map";
export default {
  props: ["tag_1"],
  render: function(createElement) {
    return createElement("div", {
      attrs: {
        id: "main"
      },
      style: {
        height: "600px"
      }
    });
  },
  data() {
    return {
      mapData2,
      dataList: [],
      max_val:0
    };
  },
  watch: {
    tag_1: {
      handler: function() {
        this.changedata(this.tag_1);
        this.initEchart();

      },
      deep: true
    }
  },
  methods: {
    initEchart() {
      
      var myChart = echarts.init(document.getElementById("main"));
      var option = {
        tooltip: {
          //数据格式化
          formatter: function(params, callback) {
            return (
              params.seriesName + "<br />" + params.name + "：" + params.value
            );
          }
        },
        visualMap: {
          min: 0,
          max: this.max_val,
          left: "left",
          top: "bottom",
          text: ["高", "低"], //取值范围的文字
          inRange: {
            color: ["#e0ffff", "red"] //取值范围的颜色
          },
          show: true //图注
        },
        geo: {
          map: "china",
          roam: false, //不开启缩放和平移
          zoom: 1.23, //视角缩放比例
          label: {
            normal: {
              show: true,
              fontSize: "10",
              color: "rgba(0,0,0,0.7)"
            }
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)"
            },
            emphasis: {
              areaColor: "yellow", //鼠标选择区域颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        },
        // 鼠标悬浮提示框
        series: [
          {
            name: "省份",
            type: "map",
            geoIndex: 0,
            data: this.dataList
          }
        ]
      };
      myChart.setOption(option);
      myChart.on("click", function(params) {
        alert(params.name);
      });
    },
    changedata(val) {
      console.log(val);
      if (val === 1) {
        this.max_val=200;
        let res = this.mapData2.data.list.map(item => {
          return {
            name: item.name,
            value: item.econNum
          };
        });
        this.dataList = res;
        // console.log(this.dataList);
        // this.initEchart();
      } else if (val === 0) {
        this.max_val=2000;

        let res = this.mapData2.data.list.map(item => {
          return {
            name: item.name,
            value: item.value
          };
        });
        this.dataList = res;
      }
      //映射
    }
  },
  mounted() {
    // console.log(this.mapData2.data.list);
    // console.log(this.tag_1);

    // console.log(res);
    this.changedata(1);

    this.initEchart();
  }
};
</script>